<template>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="350px"
      custom-class="payment-success-dialog"
    >
      <div class="icon-wrapper">
        <el-icon class="success-icon">
          
        </el-icon>
      </div>
      <h2 class="success-title">恭喜您支付成功！</h2>
      <div class="payment-info">
        <p>支付时间：{{ paymentTime }}</p>
        <p>支付方式：{{ paymentMethod }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="continueBrowsing">继续浏览</el-button>
      </div>
    </el-dialog>
  </template>

  <script>


export default {
    name:"paymentDialog",
  components: {
   
  },
  data() {
    return {
      dialogVisible: false,
      paymentTime: '2022-03-29 13:24:69',
      paymentMethod: '微信支付'
    };
  },
  methods: {
    continueBrowsing() {
      this.dialogVisible = false;
      // 这里可以添加跳转到其他页面等继续浏览的逻辑，比如使用Vue Router跳转
      console.log('继续浏览');
    }
  }
};
</script>

<style scoped lang="less">

.payment-success-dialog {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.payment-success-dialog.el-dialog__body {
  padding: 30px;
  text-align: center;
}

.icon-wrapper {
  margin-bottom: 20px;
}

.success-icon {
  font-size: 64px;
  color: #67c23a;
}

.success-title {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: normal;
}

.payment-info p {
  margin-bottom: 10px;
  color: #666;
}

.dialog-footer {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #e4e7ed;
}

</style>